<template>
  <div>
    <h1>es6的一些常见知识点总结</h1>
    <div class="buttono">
      <div>
        <button class="button" @click="getInitLetData">let</button>
      </div>
      <div>
        <button class="button" @click="getInitConstData">const</button>
      </div>
      <div>
        <button class="button" @click="getInitJieGouData">解构赋值</button>
      </div>
      <div>
        <button class="button" @click="getStringTemp">模版字符串</button>
      </div>
      <div>
        <button class="button" @click="getJiantouFunction">箭头函数</button>
      </div>
    </div>
    <div v-if="show1">
      <h1>es6中let使用方法</h1>
      <div>let的demo,点击切换颜色</div>
      <div class="item" @click="clickitem">let：1、let不能重复声明</div>
      <div class="item">let：2、let不能提前声明</div>
      <div class="item">
        let：3、let块级作用域（在代码块中有用，在代码块外没有用）全局作用域 函数
      </div>
      <div class="item">let：4、let不影响作用域链</div>
    </div>
    <div v-if="show2">
      <h1>es6中const使用方法</h1>
      <div>
        const：1、const是常量,2、一般大写，3、块级作用域，4、常量不能修改，5、对数组以及对象的修改，不算对常量修改
      </div>
    </div>
    <br />
    <div v-if="show3">
      <h1>结构赋值</h1>
      <div>1、数组结构</div>
      <div>{{ p1 }} {{ p2 }}</div>
      <div>2、对象结构</div>
      <div>{{ p3 }}{{ p4 }}</div>
    </div>
    <div v-if="show4">
      <h1>模版字符串</h1>
      <div>1、es5字符串</div>
      <div>{{ p1 }}</div>
      <div>2、es6模版字符串</div>
      <div>{{ p4 }}</div>
    </div>
    <div v-if="show5">
      <h1>箭头函数</h1>
      <div>1、普通函数</div>
      <div>{{ p1 }} 我是call调用的普通函数{{ p22 }}</div>
      <div>2、箭头函数</div>
      <div>{{ p3 }}{{ p4 }}我是call调用的箭头函数{{ p2 }}</div>
      <br />
      <div>
        <p>
          1、this指向是静态的，指向上下文。箭头函数没有自己的this。谁调用我我指向谁，
        </p>
        <p>2、call apply bind改变不了this指向</p>
        <p>3、不能作为构造函数实例化对象</p>
        <p>
          4、没有argument变量。（正常的普通函数都有一个默认的argument参数）、
        </p>
        <p>
          5、简写：（1）省略小括号：当形参只有一个的时候可以省略小括号；（2）省略花括号：当方法体只有一条语句的时候可以省略花括号，且return必须省略
        </p>
        <p>
          6、应用场景：（1）时候与this无关的回调（定时器settimeout），不适合(也是可以只是不适合
          )与this有关（demo的元素的事件，对象方法）
        </p>
        <div id="buttonid">
          demo,点击按钮两秒中变颜色
          <button @click="clickButton">点我等两秒</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show1: "",
      show2: "",
      show3: "",
      show4: "",
      show5: "",
      p1: "",
      p2: "",
      p22: "",
      p3: "",
      p4: "",
      name: "123",
    };
  },
  mounted() {
    // this.getInitLetData();
    // this.getInitConstData();
    // this.getInitJieGouData();
  },
  methods: {
    clickButton() {
      var id = document.getElementById("buttonid");
      //绑定事件
      id.addEventListener("click", function () {
        setTimeout(() => {
          //修改背景颜色
          this.style.background = "pink"; //箭头函数不改变this指向
        }, 2000);
      });

      //绑定事件
      id.addEventListener("click", function () {
        let that = this;
        setTimeout(function () {
          //修改背景颜色
          that.style.background = "pink"; //普通函数需要在外层改变this
        }, 2000);
      });
    },
    getJiantouFunction() {
      this.show5 = true;
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
      this.show4 = false;
      //普通函数
      var that = this;
      let fn = function () {
        that.p1 = "我是普通函数"; //不能用this,因为this指向变了；
        console.log("我是普通函数");
        that.p22 = this.name;
        console.log(this.name);
      };
      //箭头函数
      let fn1 = (a, b) => {
        this.p4 = "我是箭头函数";
        console.log("我是箭头函数");
        this.p2 = this.name;
        console.log(this.name);
        return a + b;
      };
      // fn();
      // this.p3 = fn1(3, 1);

      //call改变this指向
      window.name = "lisi";
      const school = {
        name: "wangwu",
      };
      fn.call(school);
      fn1.call(school);
    },
    getStringTemp() {
      this.show4 = true;
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
      this.show5 = false;

      var a = "张三";
      this.p1 = a + "今年18岁";
      this.p4 = `${a}今年18岁`;
    },
    getInitJieGouData() {
      this.show3 = true;
      this.show1 = false;
      this.show2 = false;
      this.show4 = false;
      this.show5 = false;

      const F4 = ["小沈阳", "赵四", "刘能"];
      let [person1, person2] = F4;
      this.p1 = person1;
      this.p2 = person2;
      const obj = {
        name: "赵本山",
        age: "76",
        xiaoping: function () {
          alert("昨天今天明天");
        },
      };
      let { name, age, xiaoping } = obj;
      xiaoping();
      this.p3 = name;
      this.p4 = age;
    },
    //let使用
    clickitem() {
      let items = document.getElementsByClassName("item"); //获取div元素
      for (let i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          //修改背景颜色
          items[i].style.background = "red";
        };
      }
    },
    getInitConstData() {
      this.show2 = true;
      this.show1 = false;
      this.show3 = false;
      this.show4 = false;
      this.show5 = false;

      //对数组以及对象的修改，不算对常量修改
      const arr = ["U", "Y", "ya"];
      arr.push("haha");
      console.log(arr); //此时虽然数组的值发生变化却不会报错，因为这个数组的地址没有变

      const a = 1; //此时会报错
      // a=123;
    },
    getInitLetData() {
      this.show1 = true;
      this.show2 = false;
      this.show3 = false;
      this.show4 = false;
      this.show5 = false;
      let name = "张三";
      let change = function () {
        console.log(123);
      };
      //对象简化写法，不需要在name:name赋值
      let obj1 = {
        name,
        change,
        change1(a) {
          //函数简化写法；
          console.log(13);
        },
      };

      //1、声明变量 let let不能重复声明
      let e = 100;
      // let e=123;
      //2、块级作用域(在代码块中有用，在代码块外没有) 全局作用域  函数   evel（es5严格模式）
      // {
      //   let q = 0;
      // }
      // console.log(q);
      //3、不存在变量提升（提前声明会报错）
      // console.log(b);
      // let b = "h";
      //4、不影响作用域链
    },
  },
};
</script>
<style scoped>
.buttono {
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.button {
  margin: 20px;
  width: 100px;
  height: 50px;
}
.item {
  width: auto;
  height: 30px;
  background: greenyellow;
  margin: 10px;
  /* border: darkgoldenrod; */
}
</style>